<template>
  <div class="app-center">
    <div class="changeTab">
      <el-tabs v-model="activeName">
        <el-tab-pane label="工作" name="first"></el-tab-pane>
        <el-tab-pane label="管理" name="second">管理</el-tab-pane>
        <el-tab-pane label="开发" name="fourth">开发</el-tab-pane>
      </el-tabs>
    </div>
    <!--工作  -->
    <div v-if="activeName === 'first'">
      <el-input
        placeholder="请输入内容"
        v-model="searchText"
        class="input-with-select"
        size="small"
      >
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
      <div class="jump-con">
        <div class="con-left" id="scrollBox" @scroll="scrollJump">
          <template :id="item.id" v-for="(item, index) in menulist">
            <div class="app-con" :key="index" v-if="item.status == 0">
              <IconTitle
                :title="item.label"
                imgUrl="yunwei"
                style="margin: 15px 0"
              />
              <template v-for="items in item.children">
                <el-dropdown-item
                  :icon="items.icon"
                  v-if="!items.children && items.status == 0"
                  :key="items.id"
                  @click.native="chooseMenu(items, items)"
                  >{{ items.label }}</el-dropdown-item
                >
                <div :key="items.id" v-if="items.children && items.status == 0">
                  <span class="small-title">{{ items.label }}</span>
                  <div class="dropdown-item">
                    <template v-for="child in items.children">
                      <el-dropdown-item
                        :icon="child.icon"
                        :key="child.id"
                        @click.native="chooseMenu(items, child)"
                        v-if="child.status == 0"
                        >{{ child.label }}</el-dropdown-item
                      >
                    </template>
                  </div>
                </div>
              </template>
            </div>
          </template>
        </div>
        <div class="con-right">
          <div class="my-steps-box">
            <template v-for="(item, index) in menulist">
              <div
                :class="['step-item', activeMenu == index ? 'step-active' : '']"
                v-if="item.status == 0"
                :key="index"
              >
                <div class="top-title" @click="jump(index)">
                  <span class="text">{{ item.label }}</span>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getMenu } from "@/api/admin/menu";
import IconTitle from "@/components/icon-title/index.vue";
import jQuery from "jquery";
export default {
  name: "IcoTitle",
  components: {
    IconTitle,
  },
  data() {
    return {
      activeName: "first",
      searchText: "",
      activeMenu: 0,
      topArr: [],
      clickFlag: false,
      scrollTop: 0,
      menulist: [],
    };
  },

  methods: {
    jump(index) {
      this.activeMenu = index; // 当前导航
      this.clickFlag = true;
      const jump = jQuery(".app-con").eq(index);
      this.scrollTop = jump.position().top + this.scrollBox.scrollTop - 102; // 获取需要滚动的距离
      // Chrome
      this.scrollBox.scrollTo({
        top: this.scrollTop,
        behavior: "smooth", // 平滑滚动
      });
    },
    scrollJump(e) {
      const jump = jQuery(".app-con");
      for (let i = jump.length - 1; i >= 0; i--) {
        // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
        let judge = e.target.scrollTop >= jump[i].offsetTop - jump[0].offsetTop;
        if (judge) {
          this.activeMenu = i.toString();
          break;
        }
      }
    },
    getMenulist() {
      getMenu().then((res) => {
        this.menulist = res.data.data;
      });
    },
    chooseMenu(item, path) {
      this.$store.commit("DEL_ALL_TAG");
      let parentId = item.parentId;
      sessionStorage.setItem("parentId", parentId);
          console.log(item,item.parentId)

      this.$store
        .dispatch("GetMenu", { type: true, id: parentId })
        .then((data) => {
          if (data.length !== 0) {
            this.$router.$avueRouter.formatRoutes(data, true);
            this.$router
              .push({
                path: this.$router.$avueRouter.getPath({
                  name: path.label,
                  src: path.path,
                }),
              })
              .catch(() => {});
          }
        });
    },
  },

  mounted() {
    this.scrollBox = document.getElementById("scrollBox");
    window.addEventListener("scroll", this.scrollJump, true);
    this.getMenulist();
  },
};
</script>
<style scoped>

</style>
<style lang="scss">
@import "@/styles/color.scss";
//  ::v-deep .el-popper .popper__arrow::after {
//     display: none !important;
//   }
.app-center {
  .el-tabs__nav-wrap::after {
    height: 0px;
  }
  .el-tabs__item.is-active,
  .el-tabs__item:hover {
    color: $theme;
  }
  .el-tabs__active-bar {
    background-color: $theme;
  }
  .el-dropdown-menu__item:focus,
  .el-dropdown-menu__item:not(.is-disabled):hover {
    background-color: #e9f4ff;
    color: $theme;
  }
}
</style>
<style lang="scss" scoped>
@import "@/styles/color.scss";

.app-center {
  width: 70vw;
  padding: 0 20px;
  min-height: 500px;
  z-index: 10;
  .el-input {
    margin-bottom: 10px;
  }
  .dropdown-item {
    display: flex;
    flex-wrap: wrap;
    padding: 0px 15px;
    .el-dropdown-menu__item {
      width: 145px;
      margin: 3px 0px;
      display: flex;
      align-items: center;
    }
  }
  .jump-con {
    display: flex;
    height: 400px;
    background: #fff;
    .con-left {
      width: 80%;
      height: 400px;
      overflow-y: scroll;
      .small-title {
        font-size: 12px;
        font-weight: 600;
        margin: 10px 15px;
        display: block;
      }
    }

    .con-left::-webkit-scrollbar {
      width: 6px;
      height: 7px;
    }
    .con-left::-webkit-scrollbar-thumb {
      background-color: $theme;
      border-radius: 3px;
    }

    .con-right {
      width: 20%;

      padding-left: 23px;
      box-sizing: border-box;
      .my-steps-box {
        font-size: 12px;
        .step-item {
          margin-bottom: 15px;
          position: relative;
          .text {
            cursor: pointer;
          }
        }
        .step-item.step-active {
          .text {
            color: $theme;
          }
        }
        .step-item:nth-last-child(1) .line {
          display: none;
        }
      }
    }
  }
}
</style>